<template>
  <div style="height: 10px;">
  <el-row>
    <el-col :span="14">
      <div id="statusbar"></div>
    </el-col>
    <el-col :span="6">
      <div></div>
    </el-col>
    <el-col :span="4">
      <div class="scale_slider">
        <el-slider v-model="scaleValue" :max="400" :min="10" :step="10" show-input @change="onChange" />
      </div>
    </el-col>
  </el-row>
  </div>
</template>
  
<script setup>
import { ref } from 'vue'
const scaleValue = ref(100)

var onChange = function (val) {
  console.log("scale changed**********************************");
  console.log(val);
  let scale = parseFloat(scaleValue.value)/100;
  window.mainctl.m_dynamicINTF.setScale(scale);
}

defineExpose({
});
</script>
  